<template>
	<view class="cont_box">
		<view class="con_left">
			<view :class="['con_left_item', atvid==index?'atvcol':'']" v-for="(item,index) in tabs" :key="index" @click="atvidFun(item,index)">
				{{item.title}}
			</view>
		</view>
		<view class="con_right">
			<scroll-view scroll-view :scroll-into-view='toView' @scroll='scrollTab' :scroll-with-animation="true" :scroll-y="true" :style="{height:(windowHeight-60)*2 +'rpx'}">
				<view id="A" class="scroll-view-item">
					<view class="cont_title">活动名称</view>
					<view class="cont_item">
						<text v-for="(item,index) in activityArr" :class="itemIndexA==index?'active':''" @click="select(index,'A',item)">
							{{item.activityName}}
						</text>
					</view>
				</view>
				<view id="B" class="scroll-view-item">
					<view class="cont_title">意向级别</view>
					<view class="cont_item">
						<text v-for="(item,index) in intentionLevelArr" class="level" :class="itemIndexB==index?'active':''" @click="select(index,'B',item)">
							{{item}}
						</text>
					</view>
				</view>
				<view id="C" class="scroll-view-item">
					<view class="cont_title">购车用途</view>
					<view class="cont_item">
						<text v-for="(item,index) in purposeArray" class="type_width" :class="itemIndexD==index?'active':''" @click="select(index,'D',item)">
							{{item}}
						</text>
					</view>
				</view>
				<view id="D" class="scroll-view-item">
					<view class="cont_title">购车类型</view>
					<view class="cont_item">
						<text v-for="(item,index) in typeArray" class="type_width" :class="itemIndexC==index?'active':''" @click="select(index,'C',item)">
							{{item}}
						</text>
					</view>
				</view>
				<view id="E" class="scroll-view-item">
					<view class="cont_title">购车关注点</view>
					<view class="cont_item">
						<!-- <u-checkbox-group @change="purchaseChecked">
							<u-checkbox v-model="item.checked" v-for="(item, index) in focusPurchaseList" :key="index" :name="item.message">
								<view class="type_width">
									{{ item.message }}
								</view>
							</u-checkbox>
						</u-checkbox-group> -->
						<view class="objective_checkbox_box">
							<block v-for="(item,index) in focusPurchaseList" :key="index">
								<view :class="['objective_li', item.isChecked ? 'li_checked':'']" @click="purchaseChecked(index,item)">
									<image class="iconImg" :src="require(item.isChecked ? '@/static/images/addClue_checkbox.png' : '@/static/images/addClue_checkbox_no.png')"></image>{{item.message}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom">
			<text class="reset" @click="reset">重置</text>
			<text class="contrim" @click="submit">确定</text>
		</view>
	</view>
</template>

<script>
	import {getAppActivities,
		getCommonEnums
	} from "@/service/api/api";
	export default {
		data() {
			return {
				toView:'A',
				windowHeight:'',
				itemIndexA:0,
				itemIndexB:0,
				itemIndexC:0,
				itemIndexD:0,
				itemIndexE:0,
				atvid:0,
				scrollTop:0,
				focusPurchaseArr:[],
				intentionLevelArr : ['不限','O', 'H', 'A', 'B', 'C'],
				activityArr:[],
				typeList:[],
				typeArray:[],
				purposeList:[],
				purposeArray:[],
				focusPurchaseList:[],
				formData:{
					activityName:'',
					intentionLevel:'',  //意向级别
					purposePurchase: '', //购车用途
					purposeType: '', //购车类型
					focusPurchase: '', //购车关注点
				},
				tabs:[
					{
						id:1,
						to:'A',
						title:'活动名称',					
					},
					{
						id:2,
						to:'B',
						title:'意向级别',					
					},
					{
						id:3,
						to:'C',
						title:'购车用途',					
					},
					{
						id:4,
						to:'D',
						title:'购车类型',					
					},
					{
						id:5,
						to:'E',
						title:'购车关注点',					
					}
				],
			}
		},
		onLoad(options){
			this.atvid=options.titleIndex;
			//this.toView=this.tabs[options.titleIndex].to;
			switch(options.titleIndex){
				case '1':
					uni.pageScrollTo({
						  duration: 100,//过渡时间
						  scrollTop:-146  ,//到达距离顶部的top值
					})
				break;
			}
			
		},
		created() {
			uni.getSystemInfo({
			    success:  (res)=> {
					this.windowHeight=res.windowHeight
			    }
			});
			this.getEnumsPurchaseFocus('PurchaseType')
			this.getEnumsPurchaseFocus('PurchasePurpose')
			this.getEnumsPurchaseFocus('PurchaseFocus')
			this.init()
		},
		methods: {
			select(index,name,item){
				switch(name){
					case 'A':
						this.itemIndexA=index;
						this.formData.activityName=item.activityName;
						this.formData.activityId=item.activityId;
					break;
					case 'B':
						this.itemIndexB=index;
						this.formData.intentionLevel=item;
						if(item=='不限'){
							this.formData.intentionLevel=''
						}
					break;
					case 'C':
						this.itemIndexC=index;
						this.formData.purposeType=item;
						if(item=='不限'){
							this.formData.purposeType=''
						}
					break;
					case 'D':
						this.itemIndexD=index;
						this.formData.purposePurchase=item;
						if(item=='不限'){
							this.formData.purposePurchase=''
						}
					break;
				}
			},
			init(){
				getAppActivities({}).then(res => {
					if (res.data.code == 0) {
						this.activityArr = res.data.data.map(item => {
							return {
								activityId: item.activityId,
								activityName: item.activityName,
								firstChannelId: item.firstChannelId,
								secondChannelId: item.secondChannelId
							}
						}) || [];
						this.activityArr.unshift({activityId:'',activityName:'不限'})
					//	this.formData.activityName=this.activityArr[0]
					}
				})
				
			},
			//tab 切换
			atvidFun(data,index,e){
				this.toView=data.to
				this.atvid=index
			},
			//tab 滚动切换
			scrollTab(e){	
				let quer=uni.createSelectorQuery().in(this)
				quer.select('#A').boundingClientRect(data=>{
					//this.atvid=data.id
				//	console.log(data)
					uni.pageScrollTo({
						  duration: 100,//过渡时间
						  scrollTop:data.top  ,//到达距离顶部的top值
					})
				}).exec()
			},
			////PurchaseType - 购车类型；PurchasePurpose - 购车用途;PurchaseFocus - 购车关注点
			async getEnumsPurchaseFocus(enumsdata) {
				let res = await getCommonEnums({
					type: enumsdata
				})
				if (res.data.code == 0) {
					switch (enumsdata) {
						case 'PurchaseType':
							this.typeList = res.data.data
							res.data.data.forEach(v => {
								this.typeArray.push(v.message);
							})
							this.typeArray.unshift('不限')
							break;
						case 'PurchasePurpose':
							this.purposeList = res.data.data
							res.data.data.forEach(v => {
								this.purposeArray.push(v.message);
							})
							this.purposeArray.unshift('不限')
							break;
						case 'PurchaseFocus':
							this.focusPurchaseList = res.data.data;
							
							this.focusPurchaseList.forEach(v => {
								v.isChecked=false;
							})
							break;
					}
				}
			},
			purchaseChecked(index,e){
				if(this.focusPurchaseList[index].isChecked){
					 let i = this.focusPurchaseArr.indexOf(this.focusPurchaseList[index].message)
					 this.focusPurchaseArr.splice(i, 1);
					 this.focusPurchaseList[index].isChecked = false;
					 this.$forceUpdate()
				}else{
					this.focusPurchaseList[index].isChecked=true;
					this.focusPurchaseArr.push(this.focusPurchaseList[index].message);
					this.$forceUpdate()
				}
				this.formData.focusPurchase=this.focusPurchaseArr.toString()
			},
			reset(){
				this.itemIndexA=0
				this.itemIndexB=0
				this.itemIndexC=0
				this.itemIndexD=0
				this.formData={
					activityName:'',
					intentionLevel:'',  //意向级别
					purposePurchase: '', //购车用途
					purposeType: '', //购车类型
					focusPurchase: '', //购车关注点
				}
			},
			submit(){
				this.$store.commit('addClueFormData', {
					addClueFormData:this.formData
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	body{
		height: 100%;
	}
	.cont_box{
		display: flex;
	}
	.con_left{
		width: 192rpx;
		background: #F5F6FA;
		.con_left_item{
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: #F5F6FA;
			font-size: 30rpx;
		}
		.atvcol{
			color:#3B86FF;
			background: #EBF3FF;
		}
	}
	.con_right{
		padding: 0 30rpx;
		flex: 1;
		padding-bottom: 116rpx;
		.cont_title{
			padding: 28rpx 0;
			font-size: 36rpx;
			color:#43425D;
			border-bottom: 2rpx solid #F5F6FA
		}
		.cont_item{
			display: flex;
			justify-content:flex-start;
			margin-top: 20rpx;
			flex-wrap: wrap;
			text{
				padding:12rpx 16rpx;
				border-radius: 6rpx;
				background: #F5F5F5;
				color:#43425D;
				margin: 8rpx;
			}
			.level{
				width: 112rpx;
				text-align: center;
			}
			.type_width{
				width: 148rpx;
				text-align: center;
			}
			.active{
				color:#3B86FF;
				background: #EBF3FF;
			}
		}
	}
	.objective_checkbox_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0 20rpx 0;
		position: relative;
		.objective_li{
			width: 152rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #F5F5F5;
			border-radius: 4rpx;
			padding: 0 12rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #43425D;
			margin-bottom: 20rpx;
			
			.iconImg {
				width: 22rpx;
				height: 22rpx;
				margin-right: 8rpx;
				vertical-align: middle;
				margin-top: -4rpx;
			}
		}
		&::after {
		  content: "";
		  display: block;
		  width: 152rpx;
		}
		.li_checked {
			background: #EBF3FF;
			color: #3B86FC;
		}
	}
	.bottom{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: white;
		box-shadow: 0px -4px 8px rgba(116, 169, 255, 0.15);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		.reset{
			color:#3B86FF;
			text-align: center;
			flex: 1;
		}
		.contrim{
			background: #3B86FF;
			color:white;
			text-align: center;
			flex: 1;
		}
	}
</style>
